<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 内部 -->
  <!-- <script>
    // 当浏览器资源加载完毕的时候才会执行fuction中的代码
    window.onload = function(){
    // 根据元素的id去查找元素，并且赋值给btn这个变量
    var btn = document.getElementById('btn');
    // 给btn这个按钮添加一个点击的事件（方法）
    btn.onclick = function(){
      alert('呵呵')
    }

    console.log(2222);
  }
  </script> -->
  <style>
    #div1{
      width: 200px;
      height: 100px;
      background: #f00;
    }
  </style>

</head>
<body>

  <div id="div1"></div>
  <!-- 内联 -->
  <!-- <button onclick="alert('哈哈')">点我</button> -->

  <button id="btn">点我</button>

  <button id="btn2">点我2</button>
  
<!-- 内部 -->
  <script>
    // 根据元素的id去查找元素，并且赋值给btn这个变量
    var btn = document.getElementById('btn');
    // 给btn这个按钮添加一个点击的事件（方法）
    btn.onclick = function(){
      alert('呵呵')

      comsole.log(1111);
    }
  </script>

  <!-- 外部 -->
  <script src="./test1.js"></script>

</body>
</html>